<template>
	<div class="AnchorStationContainer">
		<div class="AnchorStation">
			<div class="firstLine">
				<h2 class="title">主播电台</h2>
				<div class="dowlondStation">
					<el-button type="button" @click="open" roundButton
						>畅听更多精品电台<span class="arrow">↓</span></el-button
					>
				</div>
			</div>
			<div class="stationList">
				<ul>
					<li class="stationItem" v-for="item in DjRadiosList1" :key="item.id">
						<div class="stationImage">
							<img :src="item.picUrl" alt="" />
						</div>
						<div class="stationName">
							<div class="name">{{ item.copywriter }}</div>
							<div class="address">{{ item.name }}</div>
						</div>
					</li>
				</ul>
				<ul>
					<li class="stationItem" v-for="item in DjRadiosList2" :key="item.id">
						<div class="stationImage">
							<img :src="item.picUrl" alt="" />
						</div>
						<div class="stationName">
							<div class="name">{{ item.copywriter }}</div>
							<div class="address">{{ item.name }}</div>
						</div>
					</li>
				</ul>
				<ul>
					<li class="stationItem" v-for="item in DjRadiosList3" :key="item.id">
						<div class="stationImage">
							<img :src="item.picUrl" alt="" />
						</div>
						<div class="stationName">
							<div class="name">{{ item.copywriter }}</div>
							<div class="address">{{ item.name }}</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import { reqGetDjRadiosList } from "../../../../../api/home";
export default {
	name: "AnchorStation",
	data() {
		return {
			DjRadiosList1: [],
			DjRadiosList2: [],
			DjRadiosList3: [],
		};
	},
	methods: {
		open() {
			this.$confirm("收听更多电台节目，请在酷我音乐客户端操作", "提示", {
				confirmButtonText: "下载酷我音乐",
				cancelButtonText: "已安装酷我音乐",
				type: "warning",
			})
				.then(() => {
					this.$message({
						type: "success",
						message: "正在跳转!",
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "用户已安装",
					});
				});
		},
	},
	async mounted() {
		let DjRadiosList = await reqGetDjRadiosList();

		this.DjRadiosList1 = DjRadiosList.djRadios.slice(0, 3).map((item) => {
			return {
				id: item.id,
				name: item.name,
				picUrl: item.picUrl,
				copywriter: item.copywriter,
			};
		});
		this.DjRadiosList2 = DjRadiosList.djRadios.slice(3, 6).map((item) => {
			return {
				id: item.id,
				name: item.name,
				picUrl: item.picUrl,
				copywriter: item.copywriter,
			};
		});
		this.DjRadiosList3 = DjRadiosList.djRadios.slice(6, 9).map((item) => {
			return {
				id: item.id,
				name: item.name,
				picUrl: item.picUrl,
				copywriter: item.copywriter,
			};
		});
	},
};
</script>

<style>
.firstLine {
	display: flex;
	align-items: baseline;
	margin: 70px 0 28px;
}
.firstLine .title {
	margin-right: 30px;
}
.dowlondStation .el-button {
	/* display: flex; */
	/* width: 170px; */
	height: 36px;
	border-radius: 30px;

	background-color: #ffdf1f;
	border: none;
}
.dowlondStation .el-button .arrow {
	display: inline-block;
	margin-left: 10px;
	padding-left: 10px;
	transform: translateY(-15%);
	border-left: 1px solid #ccc;
}
.stationList {
	display: flex;
}
.stationList ul {
	width: 450px;
}
ul {
	margin: 0;
	padding: 0;
	margin-right: 10px;
}
ul li {
	list-style: none;
	margin-bottom: 20px;
}
.stationItem {
	display: flex;
}
.stationImage {
	margin-right: 3%;
}
.stationItem .stationName {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	width: 75%;
}
.stationImage img {
	width: 90px;
	height: 90px;
	cursor: pointer;
}
.stationName {
	height: 90px;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
}
.stationName .name {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.stationName .name,
.stationName .address {
	cursor: pointer;
}
.stationName .name:hover,
.stationName .address:hover {
	font-weight: 600;
}
</style>
